<style>
	#module-table .id a{
    float: right;
    text-decoration: none;
    padding: 5px;
    }
</style>
<div class='head'>
	$lang.get('module.title')
</div>

<div class='tabs'>
	<a href='/admin/module' class='selected'>$lang.get('a.module')</a>
	<a href='/admin/module/create'>$lang.get('a.create')</a>
</div>

<div class='notes'>
	$lang.get('notes.upload.module')
</div>

<input type='hidden' name='repo'/>

#parse('/widget/widget.message.html')

<table id='module-table' class='tablesorter nospace' border="0"
	cellpadding="0" cellspacing="1">
	<thead>
		<tr>
			<th>$lang.get('module.name')</th>
			<th style="min-width:60px;">$lang.get('module.id')</th>
			<th>$lang.get('module.version')</th>
			<th>$lang.get('module.build')</th>
			<th>$lang.get('module.package')</th>
			<th>$lang.get('module.license')</th>
			<th style="width:20%">$lang.get('module.readme')</th>
			<th style="width:20%">$lang.get('module.log')</th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		#foreach($f in $actives)
		<tr>
			<td>
				$!f.name
				#if($f.repo)<a href='javascript:;' onclick='_download("$f.repo")' target='_blank' class='icon icon-folder-download' title='$f.repo'></a>#end
			</td>
			<td class="id">
				<span class='id' data-name='$m.name'>$!f.id</span>
				#if($f.id > 0) <a href='javascript:;' onclick="_id('$f.name','$f.id')" class='icon icon-pencil'></a> #end
			</td>
			<td>$!f.version</td>
			<td>$!f.build</td>
			<td>$!f.pack</td>
			<td>$!f.license</td>
			<td>$!f.readme</td>
			<td class='status'>
				$!f.status
			</td>
			<td>
				#if($f.id > 0)
				<a class='btn btn-warning btn-xs' href='/admin/module/disable?name=$f.name'><i></i>$lang.get('a.disable')</a>
				#end
			</td>
		</tr>
		#end
	</tbody>
</table>

<div class='modules disabled'>
	<div class='title'>
		$lang.get('title.disabled.module')
	</div>
</div>
<table id='module-table' class='tablesorter nospace' border="0"
	cellpadding="0" cellspacing="1">
	<thead>
		<tr>
			<th>$lang.get('module.name')</th>
			<th>$lang.get('module.id')</th>
			<th>$lang.get('module.version')</th>
			<th>$lang.get('module.build')</th>
			<th>$lang.get('module.package')</th>
			<th style="width:20%">$lang.get('module.readme')</th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		#foreach($f in $list)
		<tr>
			<td>$!f.name
				#if($f.repo)<a href='javascript:;' onclick='_download("$f.repo")' target='_blank' class='icon icon-folder-download' title='$lang.get("module.download.hint")'></a>#end
			</td>
			<td>
				<span class='id' data-name='$m.name'>$!f.id</span>
			</td>
			<td>$!f.version</td>
			<td>$!f.build</td>
			<td>$!f.pack</td>
			<td>$!f.readme</td>
			<td>
				<a class='btn btn-info btn-xs' href='/admin/module/enable?name=$f.name'>$lang.get('a.enable')</a>
				<a class='btn btn-danger btn-xs' href='/admin/module/delete?name=$f.name'>$lang.get('a.delete')</a>
			</td>
		</tr>
		#end
	</tbody>
</table>

<div id='ideditor' title="$lang.get('module.id.title')" style='display:none'>
	<input type='hidden' name='name' value=''/>
	<div>
		<label><h3>ID:</h3>
			<input type='number' name='id' value=''>
		</label>
	</div>
	<button onclick='_ok();'>
		$lang.get('btn.ok')
	</button>
</div>

<iframe id='download' style='display:none'></iframe>

<script>
	$('#module-table').tablesorter({headers:{7:{sorter:false},8:{sorter:false}}});
	function _ok() {
		$('#ideditor').dialog('close');
		processing && processing.show();

		var name = $('#ideditor input[name=name]').val();
		var id = $('#ideditor input[name=id]').val();
		$.post('/admin/module/update', {
			name : name,
			id : id
		}, function(d) {
			processing && processing.hide();
			if (d.state == 200) {
				$('span.id[data-name="' + name + '"]').text(id);
				$.hint("$lang.get('restart.required')");
			} else {
				$.error(d.message);
			}
		})
	}

	function _id(name, id) {
		$('#ideditor input[name=name]').val(name);
		$('#ideditor input[name=id]').val(id);
		$('#ideditor').dialog({
			modal : true,
			close : function(e, ui) {
				$(this).dialog('destroy');
			}
		});
	}

	function _download(url) {
		$('#download').attr('src', url);
	}

	function _load() {
		$.get('/admin/dashboard', {}, function(d) {
			window.location.href = window.location.href;
		});
	}

	$(function() {
		$('input[name=repo]').upload({
			caption : "$lang.get('btn.upload.module')",
			hint : "$lang.get('hint.upload.module')",
			btn_resume : "$lang.get('btn.resume')",
			btn_delete : "$lang.get('btn.delete')",
			btn_cancel : "$lang.get('btn.cancel')",
			msg_stop : "$lang.get('msg.stop')",
			msg_done : "$lang.get('msg.done')",
			done : function(url) {
				processing && processing.show();
				$.post('/admin/module/add', {
					url : url
				}, function(d) {
					processing && processing.hide();
					
					if (d.state == 200) {
						$.message(d.message);
					} else if (d.state == 201) {
						$.warn(d.message, 3000);
						setTimeout(function() {
							processing && processing.show();
							setInterval(_load, 5000);
						}, 3000);
					} else {
						$.error(d.message);
					}

				});
			}
		});
		
		$('.module .right .error1 i').click(function(){
			var e = $('.module .right .error1');
			var e1 = $('.module .right .error1 i');
			if(e.hasClass('inline')) {
				e.removeClass('inline');
				e1.removeClass('icon-arrow-right');
				e1.addClass('icon-arrow-down');
			} else {
				e1.removeClass('icon-arrow-down');
				e1.addClass('icon-arrow-right');
				e.addClass('inline');
			}
		});
	})
</script>
